<style lang='stylus'>
page {
  height: 100%;
}
.header {
  width: 100%;
}
.scroller {
  width: 100%;
  overflow: hidden;
}
.searchSel{
  width:700rpx
}
</style>
<template>

  <view class="content ft28 flex flex-column dlc-bg">
    
    
  <view  class="searchSel mg20 mgl30">
  
 <view class="txt-rg bl ft32 pd5">选择查询类型</view>
      <view class=""> 
        <view class="icon-lg ">
			<!-- 该选择器组件是微信组件库 -->
          <picker
            mode="selector"
            :range="selTypeList"
            :value="selType"
            class="bl"
            @change="selTypeChange">
           <view class="flex flex-between">
                 <view class="uni-input ftg" >{{selType}}</view>
               <view>  
             <i-icon type="enter" offset="20" color="#ccc" /> 
            </view>
           </view>
          </picker>
        </view>
      </view>  
    </view>

     


    <view class="scroller flex1">
      <scroll-view
        class="scroll-view"
        scroll-y
        :style="{height: scrollerObj.height + 'px'}"
        @scrolltolower='scrolltolower'
        :lower-threshold='scrollerObj.lowerThreshold'>
        <view class="pd20 mg30-x mgt30 bgw radius-16"
          style="border:1rpx solid #f4f4f4"
          v-for="(order,index) in list"
          :key="index">
            <view class="item-header flex flex-between border-bottom pdb20">
              <text class="" style="#000">支付流水号：{{order.outTradeNo}}</text>
             
            </view>
            <view class="item-body pdt20">
            <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">支付金额</text>
                <text>{{order.financeType==2||order.financeType==3?order.expensesAmount/100:order.balance/100}}元</text>
            </view>          

              <view v-if="order.financeType==2||order.financeType==3" class="cell flex flex-between mgb12">
                <text class="dlc-gray">赠送金额</text>
                <text>{{order.givenAmount/100}}元</text>
              </view>
              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充值类型</text>
                <text>{{order.payType==1?"微信":
                        order.payType==2?"支付宝":
                        order.payType==3?"余额":
                        order.payType==4?"月卡":
                        order.payType==5?"IC卡":
                        "-"
                      }}</text>
              </view>
               <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">支付类型</text>
                <text>{{order.financeType==1?"充电支付":
                        order.financeType==2?"余额充值":
                        order.financeType==3?"IC卡充值":
                        order.financeType==4?"月卡购买":
                        order.financeType==5?"退款":"-"
                       }}</text>
              </view>
           <view v-if="order.financeType==3||order.financeType==4" class="cell flex flex-between mgb12">
                <text class="dlc-gray">卡号</text>
                <text>{{order.financeType==3?order.cardNo:order.outTradeNo}}</text>
              </view>
              <view class="cell flex flex-between mgb12">
                <text class="dlc-gray">充值时间</text>
                <text>{{order.ctime}}</text>
              </view>
            </view>  
        </view>
        <i-load-more
          v-if="scrollerObj.loading || scrollerObj.isEnd"
          :tip="loadingTip"
          :loading="scrollerObj.loading"
        />
      </scroll-view>
    </view>
    <i-message id="message" />
  </view>
</template>

<script>
import { getUserFinanceList } from '@/api';
import { parseTime, getdTime } from '@/utils';
import LoadMore from '@/mixins/LoadMore';
import store from '@/store'
const { $Message } = require('@/wxcomponents/iview/base/index');
export default {
  mixins: [LoadMore],
  data () {
    return {
      selTypeList:[
      "所有","充电支付","余额充值","IC卡充值","月卡购买","退款"
      ],
      selType:"所有",
      selIndex:0,			 //用户选择查询类型，0代表所有
      list:[],
      limit: 10,  			// 每页显示条数
      offset: 1, 			//默认页

      total: 1,  
      current: 1,
      searchCount: true,
      page:1,
      pages:1
    }
  },
  methods: {
  //  获取用户充值记录列表
    async fetchData () {
        //调用服务器接口
      const { data } = await getUserFinanceList({
        offset: this.offset,
        limit: this.limit,
        // financeType:this.selIndex == 7?8:this.selIndex
		financeType:this.selIndex
      })
      if (data.code === 1) {
        let { records, total } = data.data
        records = records.map(i => {
          return {
            ...i,
            ctime:i.ctime == null? "-":i.ctime.slice(0, 19),
          }
        })
        this.list = this.list.concat(records)						//对数组this.list与数组records进行合并
        this.pages = data.data.pages
        this.current = data.data.current
        this.size = data.data.size
        this.total = data.data.total
        if(this.current*this.size < this.total) {
           this.offset=this.offset+1
        } else {
           this.scrollerObj.isEnd = true
        }
      }
    },
    selTypeChange(e) {
		const num = e.detail.value[0]
		this.selType = this.selTypeList[num];
		// for(let i=0; i<=this.selTypeList[0].length; i++){
		// 		if(this.selType==this.selTypeList[0][i]) {
				this.selIndex = num
			// }
		// }
			this.list = []
			this.offset = 1
			this.fetchData ()
   }
  },
  onLoad(){}
}
</script>

